<template>
	<div class="enquiry-quotation">
		<!-- <div class="page-top" v-if="this.$store.state.options.user.oda.notice != null">
			<dl class="notice">
				<dt><img src="../../../static/images/notice-red-mini.png" /></dt>
				<dd @click="$router.push('/public/message-detail?id=' + $store.state.options.user.oda.notice.id)">{{ $store.state.options.user.oda.notice.title }}</dd>
			</dl>
		</div> -->
		<div v-show="pga > 0" @click="eventGoBackOperate" class="goback-button">返回上一级1</div>
		<van-list v-model="dataset.loading" :finished="dataset.finished" finished-text="没有更多了" @load="controllerRequestOfferList">
			<dl v-for="(item, index) in dataset.items" :key="index" class="offer-list-wrap">
				<dt class="title">
					<div>{{ item.name }}</div>
					<div>
						<p v-for="(itema, indexa) in item.danwei" :key="indexa"><span>￥{{ itema.price }}</span><span>/{{ itema.danweiming }}</span></p>
					</div>
				</dt>
				<dd class="button">
					<img src="../../../static/images/folder.png" />
					<span @click="pga = item.id">进入下级11</span>
				</dd>
			</dl>
		</van-list>
		<tab-group :dataset="navButtonGroup" identity="4" :index="2" />
	</div>
</template>

<script>
	import { Cell, CellGroup, List } from 'vant';

	import TabGroup from "../../components/currency/tab/tab.vue";

	export default {
		name: "GeneralRepositoryMEQ",
		components: {
			TabGroup,
			[List.name]: List
		},
		data() {
			return {
				pga: 0, pgaList: [],
				navButtonGroup: [
					{
						name: "暂存点订单", route: { path: '/GeneralRepository/index' }
					},
					{
						name: "待取", route: { path: '/GeneralRepository/waiting-point-map' }
					},
					{
						name: "查询报价", route: { path: '/GeneralRepository/enquiry-quotation' }
					},
					{
						name: "个人中心", route: { path: '/GeneralRepository/personal-center' }
					}
				],
				dataset: {
					page: 0, limit: 30,
					loading: false, finished: false,
					items: []
				}
			}
		},
		methods: {
			controllerRequestOfferList() {
				var url = '/api/home/garbage/getlist',
					params = {
						page: this.dataset.page,
						list_rows: this.dataset.limit,
						pga: 0
						// token: this.$store.state.options.user.token,
						// status: 1
					};

				if (this.pga > 0) params.pga = this.pga;

				this.$util.postRequestInterface(url, params, (res) => {
					this.dataset.items = res.data.data;

					if (this.dataset.items.length >= res.data.count) this.dataset.finished = true;
					this.dataset.loading = false;
				});
			},
			eventGoBackOperate() {
				this.pga = this.pgaList.pop() || 0;
			}
		},
		watch: {
			pga(nVal, oVal) {
				// console.log(nVal, oVal);

				if (this.pgaList.indexOf(nVal) < 0 && nVal > 0) this.pgaList.push(nVal);
				// console.log(this.pgaList);

				this.dataset.page = 0;
				this.dataset.items = [];
				this.dataset.finished = false;
				this.dataset.loading = false;

				// this.controllerRequestOfferList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-top {
		width: 100%;
		height: 3rem;
		position: relative;

		.notice {
			position: absolute;
			top: 0rem;
			width: 100%;
			margin: 0rem;
			padding: 0.7rem 1rem;
			display: flex;
			background: rgba(255, 247, 209, 1);
			z-index: 1;
			box-sizing: border-box;
			dt {
				padding-right: 1rem;

				img {
					width: 1.4rem;
				}
			}
			dd {
				white-space: nowrap;
				flex: 1;
				margin: 0rem;
				padding: 0rem;
				color: #ff9000;
				font-size: 1.3rem;
			}
		}
	}

	.offer-list-wrap {
		padding: 0rem 1rem;
		border-bottom: 0.4rem solid #f4f4f4;

		.title {
            padding: 1.3rem 0rem 1rem;
            display: flex;
            border-bottom: 0.1rem solid #F4F4F4;

			div:first-child {
				padding-right: 1rem;
			}

			div:last-child {
				flex: 1;

				p {
					font-size: 1.4rem;
					text-align: right;
					padding-bottom: 0.5rem;

					span:first-child {
						color: #ff0000;
					}
				}
			}
		}

		.unit {
			display: flex;

			p {
				flex: 1;
				font-size: 1.4rem;

				span:first-child {
					color: #ff0000;
				}
			}

			p:last-child {
				text-align: right;
			}
		}

		.button {
			text-align: right;
			font-size: 1.3rem;
			padding: 1.3rem 0rem;

			img {
				width: 1.7rem;
				vertical-align: middle;
				margin-right: 0.5rem;
			}

			span {
				position: relative;
				top: 1.5px;
			}
		}
	}

	.goback-button {
		background-color: #00cc00;
		padding: 1rem;
		color: #ffffff;
	}
</style>
